<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSDN网页结构</title>
		<style type="text/css">
			#head{border: 2px solid red;}
			#head .nav li{
				float: left;
				margin-left: 5px;
				/*list-style: none;*/
			}
			#section{
				border: 2px solid blue;
			}
			/*#section .p5 li{list-style: none;}
			#section .p3 li{list-style: none;}
			#section .p4 li{list-style: none;}
			#section .p2 li{list-style: none;}
			#section .p3 li{list-style: none;}*/
			
			#left1,#middle1,#right1,#middle2,#right2{
				float: left;
				width: 300px;
				
				border: 2px solid  darkgreen;
			}
			.p1:after{
				height: 0;
				clear: both;
				display: block;
				content: '';
			}
			.d1,.d2{border: 2px solid brown;}
			#foot1,#foot2,#foot3{border: 2px solid black;}
			#footer .nav2 li{
				float: left;
				margin-left: 5px;
				list-style: none;
			}
			#footer .nav3 li{
				float: left;
				margin-left: 5px;
				list-style: none;
			}
			#footer .nav4 li{
				float: left;
				margin-left: 5px;
				/*list-style: none;*/
			}
		</style>
	</head>
	<body>
		<div id="head">
			<div class="d1">头1
				<img src=""/>
			</div>
			
			<div class="d2">头2
				<img src=""/>
			</div>头3
			<ul class="nav clear">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		/*
		 * 中间部分
		 */
		<div id="section" class="p1">
			<div id="left1" class="p5">左一
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="middle1" class="p3">中间
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="middle2" class="p2">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="right1" class="p4">最右边
				<ul> 
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="right2" class="p6">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		/*
		 * 尾部
		 */
		<div id="footer" class="we">
			<div id="foot1" class="nav2">底部1
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="foot2" class="nav3">底部2
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div id="foot3" class="nav4">底部3
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
		
		
		
		
	</body>
</html>
